<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery左右滑动切换特效</title>
    <link rel="stylesheet" href="../css/demo1/style.css" type="text/css" />
</head>
<body>
<div class="bodyCon08">
    <div class="students">
        <div id="four_flash">
            <div class="flashBg">
                <ul class="mobile">
                    <li>
                        <img src="../img/demo1/senke_xy00.jpg" />
                        <dd>高同学</dd>
                        <p>2013年CPA暑期班学员，一年通过5门课程</p>
                        <a href=""></a>
                    </li>
                    <li>
                        <img src="../img/demo1/senke_xy01.jpg" />
                        <dd>李同学</dd>
                        <p>2014年CPA周末旗舰班学员；1年通过4门课程</p>
                        <a href=""></a>
                    </li>
                    <li>
                        <img src="../img/demo1/senke_xy02.jpg" />
                        <dd>丁同学</dd>
                        <p>现就职某会计师师事务所<br />2012年CPA学员，3年通过6门课程</p>
                        <a href=""></a>
                    </li>
                    <li>
                        <img src="../img/demo1/senke_xy03.jpg" />
                        <dd>宋同学</dd>
                        <p>2013年会计证、CPA长线周末班学员，2014年通过4门课程；</p>
                        <a href=""></a>
                    </li>
                    <li>
                        <img src="../img/demo1/senke_xy04.jpg" />
                        <dd>战同学</dd>
                        <p>2012年北京会计初级金榜，2014年会计中级高分一次通过</p>
                        <a href=""></a>
                    </li>
                    <li>
                        <img src="../img/demo1/senke_xy05.jpg" />
                        <dd>于同学</dd>
                        <p>2014年会计中级学员，1次性通过中级全科</p>
                        <a href=""></a>
                    </li>
                </ul>
            </div>
            <div class="but_left"><a href="javascript:;"><img  src="../img/demo1/qianxleft.png" /></a></div>
            <div class="but_right"><a href="javascript:;"><img  src="../img/demo1/qianxr.png" /></a></div>
        </div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript">
    //学员
    var _index5=0;
    $("#four_flash .but_right img").click(function(){
        _index5++;
        var len=$(".flashBg ul.mobile li").length;
        if(_index5+5>len){
            $("#four_flash .flashBg ul.mobile").stop().append($("ul.mobile").html());
        }
        $("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000);
    });


    $("#four_flash .but_left img").click(function(){
        if(_index5==0){
            $("ul.mobile").prepend($("ul.mobile").html());
            $("ul.mobile").css("left","-1380px");
            _index5=6
        }
        _index5--;
        $("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000);
    });
</script>
</body>
</html>
